<template>
  <van-nav-bar
      :title="$t('msg.vipTitle')"
      :border=false
      class="title-text"
  >
    <template #left>
      <van-icon :name="require('../../assets/ic_back.png')" size="18" @click="onBack"/>
    </template>
  </van-nav-bar>
  <div class="image-margin">
    <van-image
        fit="cover"
        radius="6px"
        height="168px"
        width="100%"
        :src="detailData.cardCover">
      <template v-slot:loading>
        <van-loading type="spinner" size="20"/>
      </template>
    </van-image>
  </div>
  <div class="explain-v">
    <span class="span1">{{$t('msg.vipStr1')}}</span>
    <span class="span2">{{detailData.explain}}</span>
  </div>
  <div class="b-v">
  <div class="bottom-v">
    <div class="p-v">
      <van-checkbox v-model="checked">
        <template #icon="props">
          <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
        </template>
      </van-checkbox>
      <span class="b-span-v" @click="toProtocol">{{$t('msg.vipStr2')}}</span>
    </div>
    <van-button class="btn-v" size="large" round type="success" @click="toOpenVip">{{$t('msg.vipStr3')}}</van-button>
  </div>
  </div>
</template>

<script>
import {doPostVip, getVipDetail} from "@/http/api";
import {ref} from "vue";
import {showToast} from "vant";
import {storage, USER_INFO} from "@/utils/storage";

export default {
  name: 'VipDetail',
  setup() {
    const onBack = () => history.back();
    const checked = ref(false);
    return {
      onBack,
      checked,
      activeIcon:require('./../../assets/ic_checked.png'),
      inactiveIcon:require('./../../assets/ic_check.png')
    };
  },
  data(){
    return{
      isProtocol:false,
      detailData:{}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      try {
        let data = await getVipDetail(this.$route.params.id)
        this.detailData = data
      } catch (e) {

      }
    },
    toProtocol(){
      this.$router.push('/protocol')
    },
    toOpenVip(){
      if(!this.checked){
        showToast(this.$t('msg.vipStr4'))
        return
      }
      this.$router.push('/vip-open')
   }
  }
}
</script>

<style scoped>
.image-margin{
  padding: 16px;
  background-color: white;
}
.explain-v{
  padding: 18px 16px;
  background-color: white;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.span1{
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
}
.span2{
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  margin-top: 10px;
}
.b-v{
  position: relative
}
.bottom-v{
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: white;
  right: 0%;
  z-index: 999;
  position: fixed;
  bottom: 0px;
  left: 0%;
}
.img-icon{
  height: 16px;
}
.b-span-v{
  font-size: 13px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #AB9263;
  line-height: 18px;
}
.p-v{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.btn-v{
  --van-button-mini-font-size: 17px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  --van-button-success-color: #FFFFFF;
  line-height: 24px;
  --van-button-success-background:#AB9263;
  --van-button-success-border-color:#AB9263;
  margin-top: 12px;
}
</style>
